<template>
  <div class="container-fluid footer">
    <div class="container footer-frame">
      <div
        class="footer-panel"
        v-for="(item1, index1) in footerList"
        :key="index1"
      >
        <div class="title-frame">
          <span>{{ item1.title }}</span>
        </div>
        <div class="list-frame">
          <div
            class="list-panel"
            v-for="(item2, index2) in item1.actions"
            :key="index2"
          >
            <span class="ho-light" @click="clickCell(index1, index2)">{{
              item2.title
            }}</span>
          </div>
        </div>
      </div>
      <div class="footer-panel">
        <div class="title-frame">
          <span>SUBSCRIBE</span>
        </div>
        <div class="list-frame">
          <div class="list-panel">
            <span>Missyeah only needs $1</span>
          </div>
          <div class="list-panel">
            <span
              >Subscribe to our newsletters and don't miss a dollar deal!</span
            >
          </div>
          <div class="list-panel">
            <input
              class="list-input"
              placeholder="Enter your email address !"
              v-model="email"
            />
          </div>
          <div class="list-panel" @click="clickSubscribe">
            <span class="ho-light">subscribe</span>
          </div>
        </div>
      </div>
      <div class="contact-frame">
        <div class="contact-panel">
          <div class="logo-frame">
            <img src="@/assets/imgs/logo-light-missyeah.png" class="logo" />
          </div>
          <div class="info-frame">
            <div class="top-frame">
              <p>24/7 hotine(free):+86 18696466</p>
              <p>EMAIL:SERVICE@MISSYEAR.COM</p>
            </div>
            <div class="share-frame">
              <div
                class="share-panel"
                v-for="(item, index) in shareList"
                :key="index"
                @click="clickShare(item)"
              >
                <img :src="item.img" class="icon" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import footer from "./Footer.js";
export default {
  mixins: [footer.mixin],
};
</script>
<style lang="less" scoped>
@import "./Footer.less";
</style>
